<template>
        <div>  <el-table :data="listData" style="width: 100%">
  
    <el-table-column prop="account" label="账户名" />
    <el-table-column prop="userGroup" label="角色"  />
    <el-table-column prop="createDate" label="创建时间"  >
      <template #default="data" >
            <div>
                {{ moment(data.row.createDate).format("YYYY-MM-DD HH:mm:ss") }}
            </div>
          </template>
      </el-table-column>>

    <el-table-column fixed="right" label="操作" >

      
      <template  v-slot="scope">

        <el-popconfirm title="您确定要删除吗?" @confirm="del(scope.row._id)">
    <template #reference>
      <el-button  type="danger" size="small" v-permissions={authvariable:authvariable.del_account,authMode:authModes.openOrDisabled}
          >删除</el-button
        >
    </template>
  </el-popconfirm>
       
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="totalCount"  v-model:current-page="pageNumber"  v-model:page-size="pageSize"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  
  /> 
  
  </div>
</template>
    
<script setup lang='ts'>

import { authModes,authvariable } from '../../configs/conter'
import { onMounted,ref} from 'vue'
import { ElMessage } from 'element-plus'
import {getAccountListApi,delAccountApi} from "../../apis/user"
// import {useCounterStore} from "../../store/counter"

import moment from 'moment'
// useCounterStore('listData')
        const del = async(id:string) => {
            // console.log("id",id);
            
          await delAccountApi(id)

          ElMessage.success("删除成功")
          getList()

}
const listData=ref([])
const pageNumber=ref(1)
const pageSize=ref(10)
const totalCount=ref()


console.log('pageNumber',pageNumber.value)
onMounted(()=>{
        getList()
        // useCounterStore.getList()

})
const handleSizeChange = () => {
  //每页显示个数发生变化
  console.log(pageSize.value);
  
}
const handleCurrentChange = () => {
  //每页显示个数发生变化
  console.log(pageNumber.value);
  getList()

}


        //拿到列表
    function getList(){
       
        getAccountListApi({
                pageNumber:pageNumber.value,
                pageSize:pageSize.value
        }) 
      
        .then(res=>{
                console.log("res666",res);
                listData.value=res.data
                totalCount.value=res.totalCount
          })
          .catch(err => {
                        console.log("err", err);
                       
                    })   
    }    

  

        
</script>
    
<style scoped lang="scss">
    .el-pagination{
        width: 100%;
        margin-top:20px;
       margin-left: 50px;
    }
</style>